<div class="tab-subscription">
  <nav id="subscription-nav" class="subscription-nav noselect">
    <ul>
      <li id="draw-tab-button" data-subscription="draw-tab-s"><svg><use xlink:href="#icon-analysis-draw"></use></svg>Draw shape</li>
      <li id="country-tab-button" data-subscription="country-tab-s"><svg><use xlink:href="#icon-analysis-country"></use></svg>Country or region</li>
      <li id="data-tab-button" data-subscription="data-tab-s"><svg><use xlink:href="#icon-analysis-data"></use></svg>Other data layers</li>
    </ul>
  </nav>
  <div id="subscription-content" class="subscription-content">
    <div id="default-subscription" class="subscription-tab-content default-subscription active">
      <header>
        <h2>Subscribe to <span class="source" data-source="near_real_time">forest change alerts</span> and user stories for your area of interest</h2>
        <button id="get-started-subscription" class="btn green uppercase medium">Get started</button>
      </header>
    </div>
    <div id="default" class="subscription-tab-content default active">
      <header>
        <h2>Define your area of interest</h2>
      </header>
    </div>
    <div id="draw-tab-s" class="subscription-tab-content draw-tab">
      <header>
        <h2>Draw in the map the area you want to subscribe</h2>
      </header>
      <div class="image"><div><svg><use xlink:href="#icon-analysis-draw"></use></svg></div></div>
      <ul id="draw-subscription" class="button-container one">
        <li><button id="start-subscription" class="btn green uppercase">Start drawing</button></li>
        <li class="hidden"><button id="done-subscription" class="btn green uppercase">Subscribe</button></li>
      </ul>
    </div>
    <div id="country-tab-s" class="subscription-tab-content country-tab">
      <select data-placeholder="Select country" class="chosen-select default notranslate" id="subscription-country-select"><option></option></select>
      <select data-placeholder="Select jurisdiction (optional)" disabled="true" class="chosen-select default notranslate" id="subscription-region-select"><option></option></select>
      <ul class="button-container one">
        <li><button id="subscription-country-button" class="btn green uppercase">Subscribe</button></li>
      </ul>
    </div>
    <div id="data-tab-s" class="subscription-tab-content data-tab">
      <header>
        <h2>Subscribe to a shape on the map</h2>
        <ol>
          <li>Use the tabs above the map to turn on a data layer <a href="#" class="source" data-source="subscribe_to_a_shape_on_the_map"><svg><use xlink:href="#shape-info"></use></svg></a></li>
          <li>Select a shape in the map</li>
          <li>Click “Subscribe”</li>
        </ol>
      </header>
      <div class="img-box">
        <div id="data-tab-play-s" class="play"></div>
        <img id="data-tab-img-s" src="/assets/infowindow-example.png"/>
      </div>
    </div>
  </div>
</div>
